<!--菜单区域-->
<!--菜单区域-->
<!--菜单区域-->
<template>
  <div class="content">
    <div class="theMenuArea">
      <div
        v-for="(item, index) in theMenu.menuList"
        :key="index"
        class="theMenu"
        :class="
          index === 0
            ? 'onTheCloud'
            : index === 1
            ? 'internalAuditOfInternalControl'
            : index === 2
            ? 'intelligentTool'
            : index === 3
            ? 'dataServices'
            : 'sharingAndCommon'
        "
      >
        <!--          标题修改-->
        <div class="title">
          <!--          标题编辑-->
          <div class="theTitleToEdit">
            <span v-if="!editState">{{ item.title }}</span>
            <span v-else>
              <el-input
                maxlength="6"
                v-model="item.title"
                :placeholder="item.title"
                v-focus
                @blur="theTitles.pushButtonSwitch = !theTitles.pushButtonSwitch"
              >
              </el-input>
            </span>
          </div>
          <!--          展示个数-->
          <div
            class="showTheNumberOf"
            v-if="editState"
            @click="theTitles.pushButtonSwitch = !theTitles.pushButtonSwitch"
          >
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                展示个数
                <el-icon>
                  <CaretBottom v-if="theTitles.pushButtonSwitch" />
                  <CaretTop v-else />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>{{ item.linkNum }}个</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <!--          模块菜单-->
        <div class="theModule">
          <div
            :class="
              index < 3 && id === 0
                ? 'left'
                : index < 3 && id > item.linkNum / 2
                ? 'bottom'
                : 'top'
            "
            v-for="(card, id) in item.linkArray"
            :key="id"
            @click="cardBtn(card)"
          >
            <div
              class="item"
              :class="[editState ? 'theEditIcon' : 'completionStatus']"
            >
              <div class="icon">
                <img :src="getAssetURL(card.iconSrc)" alt="" />
                <div>{{ card.name }}</div>
              </div>
              <div
                v-show="editState"
                class="theEditor"
                @click="theMenuEditor(card)"
              >
                <img src="@/assets/img/tkbj@2x.png" alt="" />编辑
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑、完成、取消按钮-->
    <div class="btn">
      <div class="confirm" v-if="editState">
        <button class="cancel" @click="cancel">
          <img src="../assets/img/qx@2x.png" alt="" /><span>取消</span>
        </button>
        <button @click="complete">
          <img src="../assets/img/wc@2x.png" alt="" /><span>完成</span>
        </button>
      </div>
      <div class="theEditor" v-else v-show="ifTheAdministrator">
        <button @click="theEditor">
          <img src="../assets/img/bianji@2x.png" alt="" /><span>编辑</span>
        </button>
      </div>
    </div>
  </div>
  <!--  编辑弹窗-->
  <el-dialog
    v-model="dialogVisible"
    title="编辑模块内容"
    width="480px"
    :before-close="handleClose"
    style="border-radius: 16px"
    :destroy-on-close="true"
    @close="shutDown"
  >
    <div class="popupWindow">
      <div class="icons">
        <span>请选择系统分类图标</span>
        <div
          class="icon"
          @click="popupWindowData.switch = !popupWindowData.switch"
          :class="[popupWindowData.switch ? 'theSelected' : '']"
          ref="buttonRef"
        >
          <div v-if="toTheEditMenu.iconSrc" class="chooseTheIcon">
            <img :src="getAssetURL(toTheEditMenu.iconSrc)" alt="" />
            <div class="title">
              <span
                >重新选择<el-icon>
                  <CaretBottom v-if="chooseTheIcon" />
                  <CaretTop v-else /> </el-icon
              ></span>
            </div>
          </div>

          <span v-else>
            请选择
            <el-icon>
              <CaretBottom v-if="toTheEditMenu.iconSrc" />
              <CaretTop v-else />
            </el-icon>
          </span>
        </div>
        <el-popover
          ref="popoverRef"
          :virtual-ref="buttonRef"
          trigger="click"
          virtual-triggering
          width="400px"
          popper-class="theCustom"
          @hide="hide"
        >
          <div class="iconToSelect">
            <div
              class="item"
              v-for="(item, index) in theMenu.iconSrcArray"
              :key="index"
              @click="imgClick(item.iconSrc)"
            >
              <img
                :src="getAssetURL(item.iconSrc)"
                alt=""
                class="iconImg"
                style="width: 40px"
              />
            </div>
          </div>
        </el-popover>
      </div>
      <div>
        <span>请输入系统分类标题</span>
        <el-input
          v-model="toTheEditMenu.name"
          placeholder="请输入标题（最多8个字）"
        />
      </div>
      <div>
        <span>请输入系统分类url</span>
        <el-input v-model="toTheEditMenu.link" placeholder="请输入url" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTheMenu(toTheEditMenu)"
          >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, unref} from "vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import {
  menuList,
  saveTheAdministratorsToConfigure,
  validationOfTheAdministrator,
} from "@/api/index.js";
import useTheMenu from "@/stores/theMenu.js";
const theMenu = useTheMenu();
// 请求菜单列表
const requestAMenuList = async () => {
  const data = await menuList();
  if (data.jsonArray.length === 0) {
    theMenu.menuList = JSON.parse(JSON.stringify(theMenu.initializeTheData));
  } else {
    theMenu.menuList = data.jsonArray;
  }
  theMenu.uncommittedData = JSON.parse(JSON.stringify(theMenu.menuList));
};
requestAMenuList();
// 管理员
const ifTheAdministrator = ref(false);
//是否管理员
const theAdministrator = async () => {
  const data = await validationOfTheAdministrator();
  ifTheAdministrator.value = data.result;
};
theAdministrator();
// 选择的图标
const chooseTheIcon = ref("");

//本地图片地址
const getAssetURL = (image) => {
  return new URL(`../assets/img/${image}`, import.meta.url).href;
};
//选择图标下拉选项
const buttonRef = ref();
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};

// 分类url
const classificationSystem = ref("");
// 编辑图标
const dialogVisible = ref(false);
//点击弹窗关闭按钮
const handleClose = () => {
  dialogVisible.value = false;
};
//弹窗图标选择
const popupWindowData = reactive({
  switch: false,
});
//标题开关
const theTitle = () => {
  //开关
  let pushButtonSwitch = false;
  return function () {
    return {
      pushButtonSwitch,
    };
  };
};
const theTitles = theTitle()();
// 编辑状态
const editState = ref(false);
//全局编辑权限开关
const theEditor = () => {
  editState.value = true;
};
// 完成
const complete = async () => {
  editState.value = false;
  await saveTheAdministratorsToConfigure(theMenu.menuList);
  await requestAMenuList();
};
// 取消
const cancel = () => {
  editState.value = false;
  theMenu.menuList = JSON.parse(JSON.stringify(theMenu.uncommittedData));
};
// 弹窗关闭回调
const shutDown = () => {
  chooseTheIcon.value = "";
  popupWindowData.value = false;
  classificationSystem.value = "";
  theTitle.value = "";
};
// 图标选择弹窗关闭
const hide = () => {
  popupWindowData.switch = false;
};
//正在建设中
const isUnderConstruction = () => {
    ElMessage({
        showClose: true,
        message: '正在建设中。。。',
        type: 'error',
    })
}
//点击卡片跳转
const cardBtn = (item) => {
  if (!editState.value) {
    if (item.link) {
      window.open(item.link);
    } else {
        isUnderConstruction()
      console.log("没有链接");
    }
  }
};
// 待编辑菜单数据-未提交
const toTheEditMenu = ref();
// 待编辑修改数据-修改
const toEditTheData = ref();
// 编辑菜单按钮
const theMenuEditor = (item) => {
  toTheEditMenu.value = JSON.parse(JSON.stringify(item));
  toEditTheData.value = item;
  dialogVisible.value = true;
};
// 保存菜单按钮
const saveTheMenu = (item) => {
  toEditTheData.value.name = item.name;
  toEditTheData.value.link = item.link;
  toEditTheData.value.iconSrc = item.iconSrc;
  dialogVisible.value = false;
};
// 选择图标事件
const imgClick = (item) => {
  toTheEditMenu.value.iconSrc = item;
};
</script>

<style scoped lang="less">
.content {
  width: 1417px;
  margin: 80px auto 0;
  //整个菜单区域
  .theMenuArea {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    //每个菜单区域公共样式
    .theMenu {
      box-sizing: border-box;
      margin: 0 0 38px 0;
      //标题公共样式
      .title {
        height: 24px;
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        //展示个数
        .showTheNumberOf {
          cursor: pointer;
          span {
            font-size: 18px;
            color: #606266;
            font-weight: 500;
          }
        }

        span {
          font-size: 21px;

          img {
            width: 24px;
            margin-left: 13px;
            cursor: pointer;
            vertical-align: middle;
            box-sizing: border-box;
          }

          :deep(.el-input__inner) {
            font-size: 16px;
            box-sizing: border-box;
            width: 100px;
            height: 28px;
            font-weight: 500;
            border: none;
            margin: 0;
          }
        }
      }
    }
    //云上作业
    .onTheCloud {
      width: 596px;
      height: 317px;
      box-sizing: border-box;
      .left {
        float: left;
        width: 140px;
        height: 260px;
        margin-right: 10px;
      }

      .top {
        float: left;
        width: 140px;
        height: 124px;
        margin-bottom: 10px;
      }

      .top + .top {
        margin-left: 11px;
      }

      .bottom {
        width: 214px;
        height: 124px;
        float: left;
      }

      .bottom:last-child {
        margin-left: 16px;
      }
    }
    //内审内控
    .internalAuditOfInternalControl {
      width: 292px;
      height: 317px;
      margin: 0 38px 38px 38px;
      .left {
        float: left;
        width: 140px;
        height: 260px;
        margin-right: 10px;
      }

      .top {
        float: left;
        width: 140px;
        height: 124px;
        margin-bottom: 10px;
      }

      .bottom {
        width: 140px;
        height: 124px;
        float: left;
      }
    }
    //智能工具
    .intelligentTool {
      width: 444px;
      height: 317px;
      .left {
        float: left;
        width: 140px;
        height: 260px;
        margin-right: 10px;
      }

      .top {
        float: left;
        width: 140px;
        height: 124px;
        margin-bottom: 10px;
      }
      .top + .top {
        margin-left: 10px;
      }

      .bottom {
        width: 292px;
        height: 124px;
        float: left;
      }
    }
    //数据服务
    .dataServices {
      width: 548px;
      height: 184px;
      margin: 0 40px 38px 0;
      .top {
        width: 128px;
        height: 128px;
      }
      .theModule {
        display: flex;
        justify-content: space-between;
      }
    }
    //共享及常用
    .sharingAndCommon {
      width: 827px;
      height: 184px;
      .top {
        width: 128px;
        height: 128px;
      }
      .theModule {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  //公共样式区域
  //公共样式区域
  //公共样式区域
  //每个菜单选项之公共样式
  .item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: linear-gradient(
      135deg,
      #f7f8ff 0%,
      #ffffff 53%,
      #ffffff 100%
    );
    border: 1px solid #f7f8ff;
    box-shadow: -6px -6px 16px 0 rgba(236, 241, 255, 0.4),
      6px 6px 16px 0 rgba(179, 197, 250, 0.4);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 40px;
      }

      div {
        font-size: 16px;
        color: #303133;
        text-align: center;
        font-weight: 500;
      }
    }
  }
  //非编辑状态之公共样式
  .completionStatus:hover {
    border: 1px solid #839bfc;
  }
  //编辑状态
  .theEditIcon {
    //编辑图标
    .theEditor {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      vertical-align: middle;
      color: #375efa;
      font-size: 16px;
      z-index: 111;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 16px;
        vertical-align: middle;
      }
    }
  }

  .theEditIcon:hover {
    .theEditor {
      backdrop-filter: blur(8px);
      opacity: 100%;
    }
  }
  //编辑菜单标题之公共样式
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .theTitleToEdit {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      height: 30px;
    }

    .showTheNumberOf {
      cursor: pointer;

      span {
        font-size: 18px;
        color: #606266;
        font-weight: 500;
      }
    }

    span {
      font-size: 21px;

      img {
        width: 24px;
        margin-left: 13px;
        cursor: pointer;
        vertical-align: middle;
        box-sizing: border-box;
      }

      :deep(.el-input__inner) {
        font-size: 16px;
        box-sizing: border-box;
        width: 100px;
        height: 28px;
        font-weight: 500;
        border: none;
        margin: 0;
      }
    }
  }
  //公共样式区域
  //公共样式区域
  //公共样式区域
  span {
    font-size: 24px;
    color: #303133;
    font-weight: 700;
  }
  //编辑/完成/取消按钮
  .btn {
    button {
      cursor: pointer;
      margin-top: 42px;
      background: #375efa;
      border-radius: 24px;
      width: 100px;
      height: 48px;
      border: none;

      img {
        display: inline-block;
        width: 21px;
        vertical-align: middle;
      }

      span {
        display: inline-block;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        font-weight: 700;
        vertical-align: middle;
        margin-left: 8px;
      }
    }

    .cancel {
      border: 1px solid #375efa;
      background-color: rgba(119, 136, 153, 0);
      margin-right: 20px;

      span {
        color: #375efa;
      }
    }

    .confirm {
      display: flex;
      justify-content: right;
    }

    .theEditor {
      display: flex;
      justify-content: right;
    }
  }
}

//弹窗样式

.popupWindow {
  .icons {
    cursor: pointer;

    .icon {
      border: 1px solid #dddddd;
      border-radius: 8px;
      width: 100px;
      height: 100px;
      margin: 12px 0 24px;
      background-color: #f7f9ff;
      text-align: center;
      line-height: 100px;
      box-sizing: border-box;
      .chooseTheIcon {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 100%;
          border-radius: 8px;
        }
        .title {
          width: 100%;
          height: 100%;
          inset: 0 0 0 0;
          opacity: 0;
          position: absolute;
          z-index: 111;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            color: #606266;
            font-size: 16px;
          }
        }
      }

      .chooseTheIcon:hover {
        .title {
          border-radius: 8px;
          backdrop-filter: blur(10px);
          opacity: 100%;
        }
      }
    }
    .iconToSelect {
      border: 1px solid red;
    }

    .theSelected {
      border: 2px solid #839bfc;
    }
  }

  span {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }

  :deep(.el-input) {
    height: 48px;
    margin: 12px 0 24px;

    .el-input__wrapper {
      background-color: #f7f9ff;
    }
  }
}
</style>
